// pages/zxm-radar/index.js



Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        itemTitle: '肤色', 
        itemTitleEn: 'skinColor',
      },
      {
        itemTitle: '肤质', 
        itemTitleEn: 'skinType',
      },
      {
        itemTitle: '水分', 
        itemTitleEn: 'moisture',
      },
      {
        itemTitle: '光滑度', 
        itemTitleEn: 'roughness',
      },
      {
        itemTitle: '敏感度', 
        itemTitleEn: 'severity',
      },
      {
        itemTitle: '皱纹', 
        itemTitleEn: 'Wrinkle',
      },
      {
        itemTitle: '痘痘', 
        itemTitleEn: 'Acne',
      },
      {
        itemTitle: '色斑', 
        itemTitleEn: 'Speckle',
      },
      {
        itemTitle: '毛孔', 
        itemTitleEn: 'Pores',
      },
      {
        itemTitle: '黑眼圈', 
        itemTitleEn: 'Darkcircle',
      },
      {
        itemTitle: '黑头', 
        itemTitleEn: 'Blackheads',
      }
    ],
    tabIndex: 0,
    scrollIntoView: 'skinColor',
    sixCommonOptions: {
      title: '皱纹',
      data: [1, 1, 3, 1, 3, 0, 2, 1, 1, 3, 1, 3, 0, 2],
      xLabel: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14'],
      splitNumber: 4,
      isNeedNum2Text: true,
      color: 'red',
      bgColor: 'pink',
      number2text: function number2text(value){
        let newValue;
        switch (value) {
          case 0:
            newValue = '无'
            break;
          case 1:
            newValue = '轻度'
            break;
          case 2:
            newValue = '中度'
            break;
          case 3:
            newValue = '重度'
            break;
          default:
            newValue = ''
        }
        return newValue
      }
    },

    severityOptions: {
      title: '敏感',
      data: [1, 1, 3, 1, 1, 3, 3, 1, 1, 3, 1, 1, 1, 1],
      xLabel: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14'],
      splitNumber: 4,
      isNeedNum2Text: true,
      number2text: function number2text(value){
        let newValue;
        switch (value) {
          case 0:
            newValue = ''
            break;
          case 1:
            newValue = '非敏感'
            break;
          case 2:
            newValue = ''
            break;
          case 3:
            newValue = '敏感'
            break;
          default:
            newValue = ''
        }
        return newValue
      }
    },
    roughnessOptions: {
      title: '光滑度',
      data: [1, 0, 2, 1, 1, 2, 2, 1, 1, 2, 1, 0, 1, 1],
      xLabel: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14'],
      splitNumber: 2,
      isNeedNum2Text: true,
      number2text: function number2text(value){
        let newValue;
        switch (value) {
          case 0:
            newValue = '很粗糙'
            break;
          case 1:
            newValue = '有点粗糙'
            break;
          case 2:
            newValue = '光滑细嫩'
            break;
          default:
            newValue = ''
        }
        return newValue
      }
    },
    skincolorOptions: {
      title: '肤色',
      data: [1, 0, 3, 1, 1, 2, 3, 1, 1, 3, 1, 1, 1, 1],
      xLabel: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14'],
      splitNumber: 4,
      isNeedNum2Text: true,
      number2text: function number2text(value){
        let newValue;
        switch (value) {
          case 0:
            newValue = '暗哑'
            break;
          case 1:
            newValue = '小麦色'
            break;
          case 2:
            newValue = '自然'
            break;
          case 3:
            newValue = '白皙'
            break;
          default:
            newValue = ''
        }
        return newValue
      }
    },
    skintypeOptions: {
      title: '肤质',
      data: [1, 1, 3, 1, 1, 3, 3, 1, 1, 3, 1, 2, 1, 1],
      xLabel: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14'],
      splitNumber: 4,
      isNeedNum2Text: true,
      number2text: function number2text(value){
        let newValue;
        switch (value) {
          case 0:
            newValue = '中性'
            break;
          case 1:
            newValue = '干性'
            break;
          case 2:
            newValue = '油性'
            break;
          case 3:
            newValue = '混合性'
            break;
          default:
            newValue = ''
        }
        return newValue
      }
    },

    moistureOptions: {
      // 水分充足>=90  一般缺水>=60   严重缺水<60
      title: '水分',
      data: [19, 100, 33, 60, 51, 43, 23, 11, 71, 83, 91, 82, 81, 10],
      xLabel: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14'],
      splitNumber: 4,
      isNeedNum2Text: false,
      number2text: function number2text(value){
        let newValue;
        if (value >= 90) {
          if (value === 90) {
            newValue = '水分充足'
          }else{
            newValue = ''
            // newValue = value
          }
        }else if (value >= 60) {
          if (value === 60) {
            newValue = '一般缺水'
          }else{
            // newValue = value
            newValue = ''
          }
        }else{
          if (value === 0) {
            newValue = '严重缺水'
          }else{
            newValue = ''
            // newValue = value
          }
        }
        return newValue
      }
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
  },

  /**点击锚点跳转*/
  jumpTo(e) {
    let activeIndex = e.detail.index
    this.setData({
      tabIndex: activeIndex,
      scrollIntoView: this.data.tabs[activeIndex].itemTitleEn
    })
  },

  //scroll-view滚动监听事件
  scrolling(e) {
    const { topArray } = this.data;
    let scrollTop = e.detail.scrollTop;

    let len = topArray.length
    let activeIndex = 0;
    for (let i = 0; i < len; i++) {
      if (scrollTop >= topArray[i] && scrollTop < topArray[i + 1]) {
        activeIndex = i;
      }
    }
    // console.log(activeIndex,topArray);
    this.setData({ tabIndex:  activeIndex })
  },

  //获取锚点的节点信息
  slideAnchor(e){
    new Promise(resolve => {
      let query = wx.createSelectorQuery().in(this);
      let enTabs = this.data.tabs
      for (let i = 0; i < enTabs.length; i++) {
        const element = enTabs[i].itemTitleEn;
        query.select('#' + element).boundingClientRect();
      }
      query.exec(function (res) {
        resolve(res);
      });
    }).then(res => {
      // console.log(res);  //为null的原因：获取不到模板中的元素
      let heightArray= [],topArray= [0];
      res.forEach((rect,index)=> {
        // console.log(rect,index);
        // 防止最后一个过低，滑动与tab不对应
        if (index === res.length - 2) {
          rect.top = Math.floor(rect.top) - rect.height / 5 * 2
        }
        heightArray.push(rect.height);
        topArray.push(Math.floor(rect.top));
      })

      topArray.push(Number.MAX_VALUE)
      // console.log('heightArray:', heightArray);
      // console.log('topArray:',topArray);
      this.setData({
        heightArray,
        topArray,
      });

    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.slideAnchor()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})